<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理店铺</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hall.css">
    <link rel="stylesheet" href="css/myStore.css">
</head>
<body>
<div class="nav">
    <span class="nav">我的商品</span>

    <div data-spm="nav" class="op-container">
        <a id="addProduct" class="item-button" href="#" style="display: flex; align-items: center;">
            <img src="image/store.svg" style="object-fit: contain; width: 24px; height: 24px; margin-right: 4px;">
            <div style="margin-right: 16px;">新增商品</div>
        </a>
        <a class="item-button" href="#" style="display: flex; align-items: center;">
            <img id="store-image" src="image/tx.jpg" style="object-fit: contain; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
            <div id="store-name" style="margin-right: 16px; font-size: 20px">null</div>
        </a>
    </div>

</div>



<div class="store-container">
    <div class="item-button" style="margin-bottom: 10px">
        <a id="on" onclick="selectProduct('上架', 'on')" style="margin-right: 16px; font-size: 20px; cursor: pointer;">在售</>
        <a id="off" onclick="selectProduct('下架', 'off')" style="margin-right: 16px; font-size: 20px; cursor: pointer;">已下架</a>
        <a id="wait" onclick="selectProduct('待审核', 'wait')" style="margin-right: 16px; font-size: 20px; cursor: pointer;" >待审核</a>
        <a id="fail" onclick="selectProduct('未通过', 'fail')" style="margin-right: 16px; font-size: 20px; cursor: pointer;" >未通过</a>
    </div>

    <div class="stores" id="stores">
<!--        <a class="store" href="#">-->
<!--            <img class="store-image" src="image/tx.jpg" >-->
<!--            <div class="store-name" >这是商品名</div>-->
<!--            <div class="store-introduction">这是商品名</div>-->
<!--        </a>-->
        <div class="store">
            <a class="store-info" href="product.html?productId=${product.productId}">
                <img class="store-image" src="image/tx.jpg" >
                <div class="store-name" >这是商品名</div>
                <div class="store-stock"  >剩余:18 </div>
                <div class="store-introduction" style="margin-left: 10px">这是描述</div>
            </a>
            <div class="store-op">
                <span onclick="" style="color: blue; cursor: pointer">补货</span>
                <span onclick="updateStatusById()" style="color: blue; cursor: pointer">下架</span>
                <span onclick="dele()" style="color: blue; cursor: pointer">删除</span>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/product.js"></script>
<script>
    let queryString = location.search;
    // 创建 URLSearchParams 对象
    let urlParams = new URLSearchParams(queryString);
    // 获取特定参数的值，假设要获取名为paramName的参数
    let storeId = urlParams.get("storeId");
    let storeName = urlParams.get("storeName");
    $('#store-name').text(storeName);
    $('#addProduct').attr("href", 'addProduct.html' + location.search)
    $(document).ready(function() {
        selectProduct('上架', 'on')
    });
    //拼接上架商品html
    function onHtml(data) {
        const products = $('#stores');
        products.empty();
        for (product of data) {
            let newElement = `
                            <div class="store">
                                <a class="store-info" href="product.html?productId=${product.productId}">
                                    <img class="store-image" src="image/tx.jpg" >
                                    <div class="store-name" >${product.brand}${product.productName}${product.model}</div>
                                    <div class="store-stock" >剩余：${product.stock}</div>
                                    <div class="store-introduction" style="margin-left: 10px">${product.description}</div>
                                </a>
                                <div class="store-op">
                                    <span onclick="" style="color: blue; cursor: pointer">补货</span>
                                    <span onclick="updateStatusById(${product.productId}, '下架')" style="color: blue; cursor: pointer">下架</span>
                                    <span onclick="dele(${product.productId})" style="color: blue; cursor: pointer">删除</span>
                                </div>
                            </div>`;
            products.append(newElement);
        }
    }

    //拼接下架商品html
    function offHtml(data) {
        const products = $('#stores');
        products.empty();
        for (product of data) {
            let newElement = `
                            <div class="store">
                                <a class="store-info" href="product.html?productId=${product.productId}">
                                    <img class="store-image" src="image/tx.jpg" >
                                    <div class="store-name" >${product.brand}${product.productName}${product.model}</div>
                                    <div class="store-stock" >剩余：${product.stock}</div>
                                    <div class="store-introduction" style="margin-left: 10px">${product.description}</div>
                                </a>
                                <div class="store-op">
                                    <span onclick="updateStatusById(${product.productId}, '上架')" style="color: blue; cursor: pointer">上架</span>
                                    <span onclick="" style="color: blue; cursor: pointer">修改</span>
                                    <span onclick="dele(${product.productId})" style="color: blue; cursor: pointer">删除</span>
                                </div>
                            </div>`;
            products.append(newElement);
        }
    }

    //拼接待审核商品html
    function waitHtml(data) {
        const products = $('#stores');
        products.empty();
        for (product of data) {
            let newElement = `
                            <div class="store">
                                <a class="store-info" href="product.html?productId=${product.productId}">
                                    <img class="store-image" src="image/tx.jpg" >
                                    <div class="store-name" >${product.brand}${product.productName}${product.model}</div>
                                    <div class="store-stock" >剩余：${product.stock}</div>
                                    <div class="store-introduction" style="margin-left: 10px">${product.description}</div>
                                </a>
                                <div class="store-op">
                                    <span onclick="" style="color: blue; cursor: pointer">修改</span>
                                    <span onclick="dele(${product.productId})" style="color: blue; cursor: pointer">删除</span>
                                </div>
                            </div>`;
            products.append(newElement);
        }
    }

    //拼接未通过商品html
    function failHtml(data) {
        const products = $('#stores');
        products.empty();
        for (product of data) {
            let newElement = `
                            <div class="store">
                                <a class="store-info" href="product.html?productId=${product.productId}">
                                    <img class="store-image" src="image/tx.jpg" >
                                    <div class="store-name" >${product.brand}${product.productName}${product.model}</div>
                                    <div class="store-introduction" style="margin-left: 10px">未通过原因：${product.failInfo}</div>
                                </a>
                                <div class="store-op">
                                    <span onclick="" style="color: blue; cursor: pointer">修改</span>
                                    <span onclick="dele(${product.productId})" style="color: blue; cursor: pointer">删除</span>
                                </div>
                            </div>`;
            products.append(newElement);
        }
    }

    //查询指定状态的商品
    function selectProduct(status, id) {
        //修改元素颜色
        $('#on').css('color', 'black');
        $('#off').css('color', 'black');
        $('#wait').css('color', 'black');
        $('#fail').css('color', 'black');
        $('#' + id).css('color', 'red');
        //为回调函数赋值
        let f;
        if(status === '上架') {
            f = onHtml;
        }else if(status === '下架'){
            f = offHtml;
        }else if(status === '待审核') {
            f = waitHtml;
        }else if(status === '未通过') {
            f = failHtml;
        }
        selectProductByStatus(status, 1, 1000, f)
    }
</script>
</body>
</html>